<template>
  <form @submit.prevent="submitForm" class="form-section">
    <div class="form-container">
      <div v-if= "localIfVisiable || !show_if" class="show_v">
        <div class="double-container">
          <div class="inputs-container">
            <div class="form-item">
              <label for="detailed">{{ type }}</label>
              <input type="text" id="type" :value="localSelectedRow && localSelectedRow.regionType ? localSelectedRow.regionType : '默认值'"
                class="select-right" readonly />
            </div>
            <div v-if=label1 class="form-item">
              <label for="label1">{{ label1 }}</label>
              <input type="text" id="label1"
                :value="localSelectedRow && localSelectedRow.label ? localSelectedRow.label : '默认值'" class="select-right"
                readonly />
            </div>
            <div v-if=label2 class="form-item">
              <label for="label2">{{ label2 }}:</label>
              <input type="text" id="label2"
                :value="localSelectedRow && localSelectedRow.label2 ? localSelectedRow.label2 : '默认值'" class="select-right"
                readonly />
            </div>
            <div v-if=label3 class="form-item">
              <label for="label3">{{ label3 }}</label>
              <input type="text" id="label3"
                :value="localSelectedRow && localSelectedRow.detailed ? localSelectedRow.detailed : '默认值'" class="select-right"
                readonly />
            </div>
            <div v-if=accLabel class="form-item">
              <label for="accLabel">{{ accLabel }}</label>
              <input type="text" id="accLabel"
                :value="localSelectedRow && localSelectedRow.naviAccuracyError ? localSelectedRow.naviAccuracyError : '默认值'" class="select-right"
                readonly />
            </div>
            <div class="form-item">
              <label for="monitor_num">{{ monitor_num }}:</label>
              <input type="text" id="monitor_num"
                :value="localSelectedRow && localSelectedRow.naviAccuracyError ? localSelectedRow.naviAccuracyError : '默认值'" class="select-right"
                readonly />
            </div>
            <div  class="form-item">
              <label for="safedis">{{ safedis }}</label>
              <button type="button" @click="showtable_p()" class="button2">安全间隔展示</button>
            </div>
          </div>
          <div class="image-display">
            <h3 class="capacity-title">静态容量</h3>
            <div class="form-item">
              <label for="cal_result_static">静态容量计算结果:</label>
              <input type="number" v-model="cal_result_static" id="cal_result_static" class="select-right" readonly />
            </div>
            <h3 class="capacity-title">动态容量</h3>
            <div class="form-item">
              <label for="cal_result_15min">15分钟容量计算结果:</label>
              <input type="number" v-model="cal_result_15min" id="cal_result_15min" class="select-right" readonly />
            </div>
            <div class="form-item">
              <label for="cal_result_1h">1小时容量计算结果:</label>
              <input type="number" v-model="cal_result_1h" id="cal_result_1h" class="select-right" readonly />
            </div>
          </div>
        </div>
        <div class="form-item1">
          <button type="submit" @click="checkandreturn(post_ui)" class="button1">运行</button>
          <button type="button" @click="submitForm()" class="button1">确认</button>
          <button type="button" @click="resetForm()" class="button1">重置</button>
        </div>
      </div>
      <div v-if="!localIfVisiable&&show_if "class="double-container">
        <div class="plat_total">
            <div class="plat-form">
              <h3 class="title_plat">纵向安全间隔</h3>
            <ManagementPlatform
            :aircraftTypes="[
            { name: 'I 航空器类型', values: this.showlist1 },
            { name: 'II 航空器类型', values: this.showlist2 },
            { name: 'III 航空器类型', values: this.showlist3 },
            { name: 'IV 航空器类型', values:this.showlist4 }
            ]"/>
            </div>
            <div class="plat-form">
              <h3 class="title_plat">纵向安全间隔</h3>
            <ManagementPlatform
            :aircraftTypes="[
            { name: 'I 航空器类型', values:  this.showlist5 },
            { name: 'II 航空器类型', values:  this.showlist6 },
            { name: 'III 航空器类型', values:  this.showlist7 },
            { name: 'IV 航空器类型', values: this.showlist8 }
            ]"/>
            </div>
            <div class="plat-form">
              <h3 class="title_plat">纵向安全间隔</h3>
            <ManagementPlatform
            :aircraftTypes="[
            { name: 'I 航空器', values:  this.showlist9 },
            { name: 'II 航空器类型', values:  this.showlist10 },
            { name: 'III 航空器类型', values:  this.showlist11 },
            { name: 'IV 航空器类型', values: this.showlist12 }
            ]"/>
            </div>
            <div class="exit_button">
              <button type="submit" @click="exit()" class="button3">退出</button>
            </div>
        </div>
    </div>
    </div>
  </form>
</template>

<script>
import axios from 'axios';
import ManagementPlatform from '@/components/plat_table.vue';
export default {
  name: 'FormComponent',
  components: {
    ManagementPlatform,
  },
  props: {
    formData: {
      type: Object,
      required: true,
    },
    type: {
      type: String,
      required: true
    },
    label1: {
      type: String,
      required: true
    },
    label2: {
      type: String,
      required: true
    },
    label3: {
      type: String,
    },
    cal_result: {
      type: Number,
    },
    safedis: {
      type: String,
      default: '可用飞行高度'
    },
    object_post: {
      type: Object,
    },
    monitor_num: {
      type: String,
    },
    accLabel: {
      type: String,
    },
    accLabel: {
      type: String,
    },
    selectedRow: {
      type: Object
    },
    post_ui: {
      type: String
    },
    update_ui: {
      type: String
    },
    safety_ui: {
      type: String
    },
    if_visiable:{
      type:Boolean
    },
    show_if:{
      type:Boolean
    },
  },
  data() {
    return {
      cal_result_15min: null,
      cal_result_1h: null,
      cal_result_static: null,
      localSelectedRow: { ...this.selectedRow }, 
      localIfVisiable:true,
      showlist1:[],
      showlist2:[],
      showlist3:[],
      showlist4:[],
      showlist5:[],
      showlist7:[],
      showlist6:[],
      showlist8:[],
      showlist9:[],
      showlist10:[],
      showlist11:[],
      showlist12:[],
      showlist13:[],
      showlist14:[],
      showlist15:[],
      showlist16:[],
      splitData: [],
      formData1: {
      type: Object,
    },
    };
    },
  watch: {
    if_visiable: {
    handler() {
      this.localIfVisiable = this.if_visiable;
      console.log("初步条件",this.if_visiable)
    },
    immediate: true,  // 确保初始值也会同步
  },
    selectedRow: {
      handler(newVal) {
        this.localSelectedRow = { ...newVal };
        this.localIfVisiable = this.if_visiable;
        this.cal_result_static = null;
        this.cal_result_15min = null;
        this.cal_result_1h = null;
      },
      immediate: true
    }
  },
  methods: {
    async checkandreturn(post_ui) {
      let param = {};
      console.log('post_ui',post_ui);
      console.log('object_post',this.object_post);
      try { 
        if(!this.object_post.taskType && !this.object_post.airspaceRange&&this.object_post.label2){  
          param = {
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType:this.object_post.regionType,
            latitude: this.object_post.latitude,
            longitude: this.object_post.longitude,
            altitude: this.object_post.altitude,
            label: this.object_post.label,
            availableFlightLevel: this.object_post.availableFlightLevel,
            aircraftType: this.object_post.aircraftType,
            safeIntervalType:this.object_post.safeIntervalType,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.object_post.min15CapacityEvalResult,
            h1CapacityEvalResult: this.object_post.h1CapacityEvalResult,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
            staticCapacityEvalResult:this.object_post.staticCapacityEvalResult,
            naviAccuracyError:this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            label2:this.object_post.label2,
          };
        };
        if(this.object_post.taskType && this.object_post.airspaceRange){
            const param = {
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType:this.object_post.regionType,
            taskType:this.object_post.taskType,
            airspaceRange:this.object_post.airspaceRange,
            availableFlightLevel: this.object_post.availableFlightLevel,
            label: this.object_post.label,
            aircraftType: this.object_post.aircraftType,
            operatingHeightInterval:this.object_post.operatingHeightInterval,
            safeIntervalStandard:this.object_post.safeIntervalStandard,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            naviAccuracyError:this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.object_post.min15CapacityEvalResult,
            h1CapacityEvalResult: this.object_post.h1CapacityEvalResult,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
            staticCapacityEvalResult:this.object_post.staticCapacityEvalResult,
            label2:this.object_post.label2,
          };
        };
        if (
          (!this.selectedRow.label2 || this.selectedRow.label2 === '') &&
          this.object_post.id){
          const param = {
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType:this.object_post.regionType,
            airspaceRange:this.object_post.airspaceRange,
            label: this.object_post.label,
            aircraftType: this.object_post.aircraftType,
            safeIntervalStandard:this.object_post.safeIntervalStandard,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            naviAccuracyError:this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.object_post.min15CapacityEvalResult,
            h1CapacityEvalResult: this.object_post.h1CapacityEvalResult,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
            staticCapacityEvalResult:this.object_post.staticCapacityEvalResult,
          };   
        };
        // 输出构建的请求体
        console.log("构建的请求体:", param);
        console.log("post_ui", post_ui);

        // 发起 POST 请求
        const response = await axios.post(post_ui,param);
        // 检查请求是否成功并获取返回的数据
        if (response.data) {
          console.log(response.data)
          this.cal_result_static = response.data.staticCapacityEvalResult;
          this.cal_result_15min = response.data.min15CapacityEvalResult;
          this.cal_result_1h = response.data.h1CapacityEvalResult;
        } else {
          console.error('请求成功，但返回的数据格式不正确', response.data);
        }
      } catch (error) {
        // 处理请求失败的情况
        // console.error('请求失败', error);
      }

    },
    async submitForm() {
      let param1={};
      let update_ui='';
      try { 
        if(!this.object_post.taskType && !this.object_post.airspaceRange&&this.object_post.label2){  
          param1 = {
            //起降
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType:this.object_post.regionType,
            latitude: this.object_post.latitude,
            longitude: this.object_post.longitude,
            altitude: this.object_post.altitude,
            label: this.object_post.label,
            availableFlightLevel: this.object_post.availableFlightLevel,
            aircraftType: this.object_post.aircraftType,
            safeIntervalType:this.object_post.safeIntervalType,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.cal_result_15min,
            h1CapacityEvalResult: this.cal_result_1h,
            staticCapacityEvalResult:this.cal_result_static,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
            naviAccuracyError:this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            label2:this.object_post.label2,
          };
          update_ui='http://47.99.75.194:8084/takeoffland/update';
        };
        if(this.object_post.taskType && this.object_post.airspaceRange){
          param1 = {
            //工作
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType:this.object_post.regionType,
            taskType:this.object_post.taskType,
            airspaceRange:this.object_post.airspaceRange,
            availableFlightLevel: this.object_post.availableFlightLevel,
            label: this.object_post.label,
            aircraftType: this.object_post.aircraftType,
            operatingHeightInterval:this.object_post.operatingHeightInterval,
            safeIntervalStandard:this.object_post.safeIntervalStandard,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            naviAccuracyError:this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.cal_result_15min,
            h1CapacityEvalResult: this.cal_result_1h,
            staticCapacityEvalResult:this.cal_result_static,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
            label2:this.object_post.label2,
          };
          update_ui='http://47.99.75.194:8084/workzone/update';
        };
        if (
          (!this.selectedRow.label2 || this.selectedRow.label2 === '') &&
          this.object_post.id){
            //航路
          param1 = {
            id: this.object_post.id,
            regionIndex: this.object_post.regionIndex,
            dataSource: this.object_post.dataSource,
            regionType:this.object_post.regionType,
            airspaceRange:this.object_post.airspaceRange,
            label: this.object_post.label,
            aircraftType: this.object_post.aircraftType,
            safeIntervalStandard:this.object_post.safeIntervalStandard,
            airspaceRestrictionsInfo: this.object_post.airspaceRestrictionsInfo,
            naviAccuracyError:this.object_post.naviAccuracyError,
            monitoringCapacity: this.object_post.monitoringCapacity,
            reservedField1: this.object_post.reservedField1,
            reservedField2: this.object_post.reservedField2,
            reservedField3: this.object_post.reservedField3,
            min15CapacityEvalResult: this.cal_result_15min,
            h1CapacityEvalResult: this.cal_result_1h,
            staticCapacityEvalResult:this.cal_result_static,
            safeIntervalRepo: this.object_post.safeIntervalRepo,
          };   
          update_ui='http://47.99.75.194:8084/airlane/update';
        };
        await axios.post(update_ui, param1);
      }
      catch (error) {
        // 处理请求失败的情况
        console.error('请求失败', error);
      }
  },
  exit(){
    this.localIfVisiable = true;
    // this.$emit('update-if-visiable', this.localIfVisiable); 
  },
  showtable_p()
  {
    this.localIfVisiable = false;
    console.log("弹窗开启",this.safety_ui);
    this.fetchFormData(this.safety_ui)

    
  },
  async fetchFormData(safety_ui){
      console.log("fetchFormData  执行")
        try{
          const response = await axios.get(safety_ui)
          console.log(response.data);
          if(response.data.message ==='success'){
            this.formData1 = response.data.data;
            console.log("fetchFormData  执行完成,done")
            console.log(response.data);
          }
        }
        catch (error){
          console.error('获取数据失败',error);
        }
        const matchedItem = this.formData1.find((item) => item.id === this.object_post.id);
        this.showlist1=matchedItem.safeInterval[0][0];
        this.showlist2=matchedItem.safeInterval[0][1];
        this.showlist3=matchedItem.safeInterval[0][2];
        this.showlist4=matchedItem.safeInterval[0][3];
        this.showlist5=matchedItem.safeInterval[1][0];
        this.showlist6=matchedItem.safeInterval[1][1];
        this.showlist7=matchedItem.safeInterval[1][2];
        this.showlist8=matchedItem.safeInterval[1][3];
        this.showlist9=matchedItem.safeInterval[2][0];
        this.showlist10=matchedItem.safeInterval[2][1];
        this.showlist11=matchedItem.safeInterval[2][2];
        this.showlist12=matchedItem.safeInterval[2][3];
    },

    resetForm() {
      this.localSelectedRow={};
      this.cal_result_static = null;
      this.cal_result_15min = null;
      this.cal_result_1h = null;
      this.$emit('reset'); // 通过 emit 事件将重置操作传递给父组件
    }
  }
}
</script>

<style scoped>
/* 样式代码和主组件保持一致 */
.form-section {
  width: 100%;
  height: 100%
}

.form-container {
  width: 99%;
  height: 100%;
  border: 1.5px solid rgba(33, 136, 255, 0.5);
  border-radius: 8px;
  flex-direction: column;
  position: relative;
}
.show_v{
  height: 100%;
  width: 100%;
}
.double-container {
  display: flex;
  height: 100%;
  width: 100%;
}

.inputs-container {
  display: flex;
  flex-direction: column;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin-left:1%;
  margin-top: 4%;
  width: 47%;
  height: 100%;

}

.form-item {
  display: flex;
  width: 100%;
  height: 8%;
  justify-content: flex-start;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  align-items: center;
  font-size: 1.6vh;
  color: rgba(255, 255, 255, 1);

}

.form-item label {
  width: 40%;
  text-align: left;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  margin-right: 0.4%;
}




.select-right {
  position: relative;
  height: 40%;
  width: 42%;
  font-size: 1.3vh;
  background-color: transparent;
  /* 背景色与环境一致 */
  border: 0.01px solid rgba(221, 221, 221, 0.5);
  /* 边框颜色 */
  border-radius: 2px;
  /* 圆角样式 */
  color: #ffffff;
  /* 字体颜色 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  box-sizing: border-box;
}

.select-right:read-only {
  background-color: transparent;
  /* 只读时背景色 */
  color: rgba(255, 255, 255, 0.5);
  /* 只读时字体颜色 */
  border: 0.01px solid rgba(221, 221, 221, 0.5);
  /* 保持边框样式 */
  cursor: default;
  /* 鼠标指针为默认 */
}

.select-right option {
  background-color: rgb(32, 39, 61);
  /* 设置下拉选项的背景颜色 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  color: white;
  opacity: 0.5;
}


.select-right1 {
  position: relative;
  height: 40%;
  width: 42%;
  font-size: 1.3vh;
  /* padding: 3.3%; 设置内边距 */
  background-color: transparent;
  /* 背景色与环境一致 */
  border: 1px solid rgba(255, 255, 255, 1);
  /* 边框颜色 */
  border-radius: 2px;
  /* 圆角样式 */
  color: #ffffff;
  /* 字体颜色 */
  font-family: AlibabaPuHuiTi_2_55_Regular;
  box-sizing: border-box;
  overflow: auto;
}



.form-item1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  bottom: 6%;
  height: 4%;
  /* font-size: 4vh; */
  color: #ffffff;
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
}

.capacity-title {
  width:100%;
  font-size: 4vh; /* 调整为你需要的标题大小 */
  font-weight: bold; /* 设置字体粗细 */
  text-align: left; /* 确保标题与其他标题左对齐 */
  margin-bottom: 1vh; /* 给标题与下方内容增加适当的间距 */
  margin-top: 2vh; /* 给标题与上方内容增加适当的间距 */
  color: #ffffff; /* 你可以根据页面风格选择合适的颜色 */
}

.image-display {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  width: 55%;
  height: 70%;
  gap:5%;
  border-radius: 4px;
  background-color: transparent;
  flex-direction: column;
  font-family: AlibabaPuHuiTi_2_55_Regular;
}

.button1 {
  background: url(@/assets/img/module4/part1/button1.png) no-repeat center center, url(@/assets/img/module4/part1/table_b.png) no-repeat center center;
  background-size: contain, 50%;
  color: #ffffff;
  border: none;
  padding: 0.4vh 4.7vh;
  margin-left: 9%;
  font-size: 2vh;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
}

.button1:hover {
  background: url(@/assets/img/module4/part1/button2.png) no-repeat center center;
  padding: 0.4vh 4.6vh;
  background-size: contain, 50%;
  transform: scale(1.05);
}

.button1:active {
  background: url(@/assets/img/module4/part1/button2.png) no-repeat center center;
  background-size: contain, 50%;
  padding: 0.4vh 2.6vh;
}



.button3 {
  background: url(@/assets/img/module4/part1/button1.png) no-repeat center center, url(@/assets/img/module4/part1/table_b.png) no-repeat center center;
  background-size: contain, 50%;
  color: #ffffff;
  border: none;
  padding: 0.4vh 4.7vh;
  margin-bottom: 2%;
  font-size: 2vh;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
}

.button3:hover {
  background: url(@/assets/img/module4/part1/button2.png) no-repeat center center;
  padding: 0.4vh 4.6vh;
  background-size: contain, 50%;
  transform: scale(1.05);
}

.button3:active {
  background: url(@/assets/img/module4/part1/button2.png) no-repeat center center;
  background-size: contain, 50%;
  padding: 0.4vh 2.6vh;
}




.button2 {
  background: url(@/assets/img/module4/part1/button1.png) no-repeat center center, url(@/assets/img/module4/part1/table_b.png) no-repeat center center;
  background-size: 100% auto;
  color: #ffffff;
  border: none;
  /* padding: 3vh 2h; */
  font-size: 1.5vh;
  transition: background-color 0.3s, transform 0.3s;
  white-space: nowrap;
}

.button2:hover {
  background: url(@/assets/img/module4/part1/button2.png) no-repeat center center;
  /* padding: 1.3vh 4.6vh; */
  background-size: 100% auto;
  transform: scale(1.05);
}

.button2:active {
  background: url(@/assets/img/module4/part1/button2.png) no-repeat center center;
  background-size: 100% auto;
  /* padding: 1.3vh 2.6vh; */
}

.plat_total{
  display: flex;
  height:100%;
  width:100%;
  margin-top: 1%;
  flex-direction: column; 
}
.plat-form
{
  /* margin-top:2%; */
  display: flex;
  height:33%;
  width:100%;
  margin-left:1.1%;
  flex-direction: column; 
}

.exit_button{
  justify-content: center;
  align-items: center;
  display: flex;
  height:8%;
  width:100%;
}
.title_plat {
  display: flex;
  width:15%;
  height:8%;
  font-size: 2vh; /* 调整为你需要的标题大小 */
  font-weight: bold; /* 设置字体粗细 */
  align-self: center;
  color: #ffffff; /* 你可以根据页面风格选择合适的颜色 */
}

</style>